<template>
  <div class="list-view">
    <div class="filter-bar">
      <select v-model="filterMonth" class="filter-select">
        <option value="">全部月份</option>
        <option v-for="month in availableMonths" :key="month" :value="month">
          {{ month }}
        </option>
      </select>
      <select v-model="filterType" class="filter-select">
        <option value="">全部类型</option>
        <option value="expense">支出</option>
        <option value="income">收入</option>
      </select>
    </div>

    <div class="record-list">
      <div v-if="filteredRecords.length === 0" class="empty-state">
        <div class="empty-icon">📝</div>
        <p>还没有记账记录哦</p>
        <p class="empty-tip">点击"记一笔"开始记账吧！</p>
      </div>

      <div v-for="record in filteredRecords" :key="record.id" class="record-item">
        <div class="record-left">
          <span class="record-category">{{ getCategoryInfo(record.category).icon }}</span>
          <div class="record-info">
            <div class="record-name">{{ getCategoryInfo(record.category).name }}</div>
            <div class="record-note" v-if="record.note">{{ record.note }}</div>
            <div class="record-date">{{ formatDate(record.date) }}</div>
          </div>
        </div>
        <div class="record-right">
          <div class="record-amount" :class="record.type">
            {{ record.type === 'expense' ? '-' : '+' }}{{ formatMoney(record.amount) }}
          </div>
          <button class="delete-btn" @click="handleDelete(record.id)">删除</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { formatMoney, formatDate } from '@/utils/format'
import { getCategoryInfo } from '@/utils/categories'

const props = defineProps({
  records: {
    type: Array,
    required: true
  }
})

const emit = defineEmits(['deleteRecord'])

const filterMonth = ref('')
const filterType = ref('')

// 筛选后的记录
const filteredRecords = computed(() => {
  let filtered = props.records

  if (filterMonth.value) {
    filtered = filtered.filter(record => {
      const recordMonth = record.date.substring(0, 7)
      return recordMonth === filterMonth.value
    })
  }

  if (filterType.value) {
    filtered = filtered.filter(record => record.type === filterType.value)
  }

  return filtered.sort((a, b) => new Date(b.date) - new Date(a.date))
})

// 可用月份列表
const availableMonths = computed(() => {
  const months = new Set()
  props.records.forEach(record => {
    months.add(record.date.substring(0, 7))
  })
  return Array.from(months).sort().reverse()
})

// 处理删除
const handleDelete = (id) => {
  if (confirm('确定要删除这条记录吗？')) {
    emit('deleteRecord', id)
  }
}
</script>

<style scoped>
.filter-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}

.filter-select {
  flex: 1;
  padding: 10px;
  border: 2px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.95rem;
  cursor: pointer;
}

.filter-select:focus {
  outline: none;
  border-color: var(--primary-color);
}

.record-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 16px;
}

.empty-tip {
  font-size: 0.9rem;
  margin-top: 8px;
}

.record-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  transition: all 0.3s;
}

.record-item:hover {
  box-shadow: var(--shadow);
  border-color: var(--primary-color);
}

.record-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.record-category {
  font-size: 2rem;
}

.record-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.record-name {
  font-weight: 600;
  color: var(--text-primary);
}

.record-note {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.record-date {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.record-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.record-amount {
  font-size: 1.2rem;
  font-weight: bold;
}

.record-amount.expense {
  color: var(--danger-color);
}

.record-amount.income {
  color: var(--success-color);
}

.delete-btn {
  padding: 4px 12px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s;
}

.delete-btn:hover {
  background: var(--danger-color);
  color: white;
  border-color: var(--danger-color);
}
</style>
